﻿<!DOCTYPE html>
<html>
<head>
   
</head>
<body>
        
        <table style="color:#fff;width:600px;position:fixed;border:solid 4px #fff" id="frmUrl">
            <tr>
                <td>
                    <table>
                        <tr>
                            <td>
                                <div ng-click="doApply('en');">
                                    {{$$$langData.en}}
                                </div>
                            </td>
                            <td>
                                <div ng-click="doApply('vn');">
                                    {{$$$langData.vn}}
                                </div>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <p class="font-size-20" style="color:#fff">
                        {{getDescription()}}
                        
                    </p>
                </td>
                
            </tr>
          
            <tr>
                <td>
                    <input type="text" class="k-textbox" style="width:100%" ng-model="Url" placeholder="[{{getPlaceholder()}}]" ng-change="isError=false;" />
                </td>
            </tr>
            <tr>
                <td>
                    <progress class="indeterminate" style="width:100%;display:none;background-color:#fff"></progress>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" id="btnConnect" class="k-button"  style="float:right" ng-click="doSaveUrl();" />
                </td>
            </tr>
            <tr ng-if="$$$connectError()">
                <td>{{$$$connectError()}}</td>
            </tr>
            <tr>
                <td style="background-color:#fff" ng-if="isError">
                    <p class="font-size-20" style="color:#ff0000">
                        {{$$$errorDescription()}}

                    </p>
                </td>
            </tr>
        </table>
        
    
    <script>
        var scope = this;
        scope.$$$langData = {
            en: "English",
            vn: "Tiếng Việt",
            Description: {
                en: "Connection to Web service",
                vn: "Thiết lập nối kết với server",
            },
            UrlHelp: {
                en: "Enter server url (ex:http://www.mysite.com)",
                vn: "Nhập vào địa chỉ của server (ví dụ:http://www.mysite.com)"
            },
            ApplyButton: {
                en: "Connect...",
                vn:"Kết nối..."
            },
            Error: {
                en: "Please enter url",
                vn:"Xin nhập vào địa chỉ của server"
            },
            ConnectError: {
                en: "Can not connect to server, please try agian",
                vn: "Không thể kết nối với server, thử lại lần nữa"
            }
        };
        scope.$$$connectError = function () {
            if (scope.isConnectError) {
                return scope.$$$langData.ConnectError[ngW8.$("$lang").$getLanguageCode()];
            }
            else {
                return undefined;
            }
        }
        scope.$$$errorDescription = function () {
            if (scope.isError) {
                return scope.$$$langData.Error[ngW8.$("$lang").$getLanguageCode()];
            }
            else {
                return undefined;
            }
        };
        scope.$find("#btnConnect").val(scope.$$$langData.ApplyButton[ngW8.$("$lang").$getLanguageCode()]);
      
        scope.getDescription = function () {
         
            return scope.$$$langData.Description[ngW8.$("$lang").$getLanguageCode()];
        };
        scope.getPlaceholder = function () {
            return scope.$$$langData.UrlHelp[ngW8.$("$lang").$getLanguageCode()];
        };
        scope.getApplyButton = function () {
            return scope.$$$langData.ApplyButton[ngW8.$("$lang").$getLanguageCode()];
        };
        scope.$$$ready(function () {
            $("#frmUrl").css("left", ($(window).width() - $("#frmUrl").width()) / 2);
            $("#frmUrl").css("top", ($(window).height() - $("#frmUrl").height()) / 2);
            
        });
        scope.doApply = function (code) {
            scope.$find("#btnConnect").val(scope.$$$langData.ApplyButton[code]);
            ngW8.$("$lang").$setLanguageCode(code);
            
            scope.$apply();
        };
        scope.doSaveUrl = function () {
        
            if((!scope.Url)||(scope.Url==null)||
                (scope.Url == "")) {
                scope.isError = true;
                scope.$apply();
                return ;
            }
            ngW8.$("$store").$set("$SERVICE_URL", scope.Url);
            $(".indeterminate").show();
            scope.isConnectError = false;
            scope.$apply();
            WS.$call("System/CheckConnection",undefined, function () {
                ngW8.$("$loader").$load(scope, "Commons/Login.html", function (loginScope, ele) {
                    $("body").html("");
                    ele.appendTo($("body")[0]);
                });
            }, function () {
                scope.isConnectError = true;
                scope.$apply();
                $(".indeterminate").hide();
            });
            
        };
      
    </script>
</body>
</html>